<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="申请人">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="实验室">
        <el-select v-model="form.region" placeholder="选择实验室">
          <el-option v-for="lis in this.list" :label="lis.name" :value="lis.name" :key="lis.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="时间">
        <el-col :span="11">
          <el-date-picker v-model="form.date1" type="date" placeholder="开始时间" style="width: 100%;" />
        </el-col>
        <el-col :span="2" class="line">-</el-col>
        <el-col :span="11">
          <el-time-picker v-model="form.date2" type="fixed-time" placeholder="开始时间" style="width: 100%;" />
        </el-col>
      </el-form-item>
      <el-form-item label="器材">
        <el-checkbox-group v-model="form.materials">
          <el-checkbox v-for="lis in this.materialList.materials" :label="lis.name" name="type" :key="lis.id" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="备注留言">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onCancel">撤销</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getLab } from '@/api/record'
import { getMaterial } from '@/api/record'

export default {
  data() {
    return {
      id:null,
      list:null,
      malist:null,
      materialList:
        {id:0,
        materials:[
          {name:'',num:0},
          {name:'',num:0},
          {name:'',num:0}]
        },
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        materials: [],
        desc: ''
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    onSubmit() {
      this.$store.commit("setLab",this.form)
      // console.log(this.$store.state.lab)
      showClose: true,
      this.$message('提交成功等待审核!')
      type:'success'
    },
    onCancel() {
      this.$message({
        message: '撤销申请!',
        type: 'info'
      })
    },
    fetchData(){
     getLab().then(response => {
        this.list = response.data.items
        // console.log(this.list)
      })
      getMaterial().then(response => {
        this.malist = response.data.items
        // console.log(this.malist)
      })
    }
  },
  watch: {
   'form.region':function(){
     for(var i=0;i<this.list.length;i++){
       if(this.list[i].name==this.form.region){
        this.materialList=this.malist[i]
       }
     }
   } 
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

